<template lang="html">
  <article id="views-videos">
    <header>
      视频推荐
    </header>
    <Recommends
      :list="videoList"
      v-if="videoList.length > 0"
    ></Recommends>
    <p class="list-none" v-else>- 暂无视频，敬请期待 -</p>
  </article>
</template>

<script>
import superagent from 'superagent'
import authMiddleware from '@/lib/auth-middleware'
import utils from '@/lib/utils'

export default {
  name: 'Page-videos',
  components: {
    Recommends: require('@/components/video/recommends'),
  },
  data(){
    return {
      videoList: []
    }
  },
  methods: {
    getRecommendList(){
      return new Promise((resolve, reject) => {
        superagent.get('/api/video/index')
          .use(authMiddleware())
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data.videos)
            } else {
              if(!!res.body && !!res.body.data){
                reject(res.body.data)
              } else {
                reject(new Error('getRecommendList error'))
              }
            }
          })
      })
    },
  },
  created(){
    this.getRecommendList()
    .then(data => {
      this.videoList = data
    })
  },
  beforeRouteUpdate(to, from, next){
    next()
    this.getRecommendList()
    .then(data => {
      this.videoList = data
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-videos{
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  background-color: $common-black;
  header{
    width: 100%;
    font-size: 34px;
    letter-spacing: 1px;
    line-height: 2;
    text-align: center;
    color: $common-red;
    background-color: #fff;
    border-radius: 10px;
    opacity: 0.9;
  }
  .list-none{
    margin-top: 500px;
    width: 100%;
    font-size: 34px;
    letter-spacing: 1px;
    line-height: 2;
    text-align: center;
    color: #fff;
    // color: $common-red;
    border-radius: 10px;
  }
}
</style>
